<template>
  <s-clean-layout>
    <view class="relationship-select-container">
      <!-- 自定义导航栏 -->
      <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="navbar-left" @tap="goBack">
          <text class="back-icon">&#xe60e;</text>
        </view>
        <view class="navbar-title">选择关系</view>
        <view class="navbar-right"></view>
      </view>

      <!-- 关系列表 -->
      <scroll-view scroll-y class="relationship-list" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
        <view class="relationship-section">
          <view
            v-for="(item, index) in relationships"
            :key="index"
            class="relationship-item"
            @tap="selectRelationship(item)"
          >
            <text class="relationship-name">{{ item.name }}</text>
            <text class="check-icon" v-if="selectedId === item.id">✓</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </s-clean-layout>
</template>

<script>
import ContactApi from '@/sheep/api/contact/contact';

export default {
  data() {
    return {
      statusBarHeight: 20,
      relationships: [],
      selectedId: null
    }
  },
  onLoad(options) {
    // 获取状态栏高度
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    
    // 获取当前选中的关系ID
    if (options.id) {
      this.selectedId = parseInt(options.id)
    }
    
    // 加载关系数据
    this.loadRelationships()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 加载关系数据
    async loadRelationships() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const res = await ContactApi.getRelationships()
        
        if (res.code === 0 && res.data) {
          this.relationships = res.data
        }
      } catch (error) {
        console.error('加载关系失败', error)
        uni.showToast({
          title: '加载关系失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 选择关系
    selectRelationship(item) {
      // 返回上一页并传递选中的关系
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      
      // 如果上一页是联系人编辑页面，更新关系数据
      if (prevPage) {
        prevPage.formData.relationshipId = item.id
        prevPage.formData.relationshipName = item.name
      }
      
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.relationship-select-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 100;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.navbar-left {
  display: flex;
  align-items: center;
}

.back-icon {
  font-family: "iconfont";
  font-size: 18px;
  color: #333;
}

.navbar-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.navbar-right {
  width: 60px;
}

.relationship-list {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.relationship-section {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.relationship-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.relationship-name {
  font-size: 15px;
  color: #333;
}

.check-icon {
  font-size: 18px;
  color: #2B7FF3;
}
</style>